<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内容的查找与替换</title>
    <style>
        div{
            float: left;
        }
        body{
            background-color: #F3EFE0;
        }
        .bot{
            color: #918E84;
            font-family:Arial, Helvetica, sans-serif;
            font-size: 24px;
            position: relative;
            right: 100px;
            float: right;
        }
        .bot{
            clear: both;
            position: relative;
            top: 100px;
        }
    </style>
</head>
<body>
    <div>过滤前内容:<br>
        <!-- 定义输入框 -->
        <textarea id="pre" cols="60" rows="20"></textarea>
        <!-- 清空按钮 -->
        <input type="button" id="btn1" value="清空">
        <!-- 过滤按钮 -->
        <input type="button" id="btn2" value="过滤">
    </div>
    <div>过滤后内容:<br>
        <textarea id="res" cols="60" rows="20"></textarea>
    </div>
    <script>
        //设置按钮触发时的函数
        document.getElementById('btn1').onclick = function(){
            //将输入框的信息全部清空
            var str = document.getElementById('pre').value = '';
            //将输出框的内容全部清空
            var newstr = document.getElementById('res').value = '';
        }

        
        document.getElementById('btn2').onclick = function(){
            //定义查找并需要替换的内容规则, [\u4e00-\u9fa5]表示匹配任意中文字符
            var reg = /(bad)|[\u4e00-\u9fa5]/gi;
            //获取输入框的值
            var str = document.getElementById('pre').value;
            //将符合正则表达式的所有字符串替换为 *
            var newstr = str.replace(reg, '*');
            //将新生成的字符串显示到转化框中
            document.getElementById('res').value = newstr;
        };
    </script>
    <div class="bot">
        <input type="button" value="返回" onclick="location.href = '../章节目录/第九章.html'">
        <br><br><br><br><br><br><br><br>
        <h3>Please appreciate((●'◡'●))......</h3>
    </div>
</body>
</html>